<template>
  <div class="question-container">
    <el-form :model="form" :rules="ruleForm" label-width="110px">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="内容：" prop="question">
        <el-input type="textarea" v-model="form.question"></el-input>
      </el-form-item>
      <el-form-item label="农作物名称：" prop="plantName">
        <el-input type="textarea" v-model="form.plantName"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input type="text" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" @click="onSubmit">去提问</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { addQuestion } from "../api/order";
const router = useRouter();

// 使用 reactive 创建响应式数据
const form = ref({
  title: "",
  plantName: "",
  phone: "",
  expertName: useRoute().query.id,
  status: 0,
  question: "",
});

// 表单验证规则
const ruleForm = ref({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  plantName: [{ required: true, message: "请输入农作物名称", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  question: [{ required: true, message: "请输入内容", trigger: "blur" }],
});

// 提交表单的方法
const onSubmit = () => {
  // 使用 Element Plus 的表单验证方法

  addQuestion(form.value)
    .then((res) => {
      console.log(res);
      ElMessage.success("提问成功！");
      // 使用 Vue Router 的编程式导航
      router.push("/home/guide")
    })
    .catch((err) => {
      console.log(err);
    });
};

// 获取表单的引用
const formRef = ref(null);

// 使用 onMounted 生命周期钩子
onMounted(() => {});
</script>

<style lang="less" scoped>
.question-container {
  width: 1300px;
  height: 100%;
  margin: 10px auto;
  background: #fff;
  padding: 20px 0;
}
</style>